<script setup>
	import { onLoad } from "@dcloudio/uni-app"
  import {ajax} from '@/utils/tradeInfo';
	import { ref, onMounted } from 'vue'

  const tradeInfo = ref({})
  const total = ref(0)
  const commentPopup = ref(null)
  const trade = ref(null)

	onLoad(option=>{
    const {page, scroll} = option
		onMounted( async ()=>{
			tradeInfo.value = (await ajax(page,1))[0]
      total.value = tradeInfo.value.comments.length
      for (let v of tradeInfo.value.comments) total.value += v.replies.length
    })
  })
  const text = ref(`
				{血损}全新未拆封包邮傲风阿拉丁安德瑞同品质电竞椅学生宿舍电脑椅家用网吧竞技可躺游戏椅子靠背办公座椅
				{血损}全新未拆封包邮傲风阿拉丁安德瑞同品质电竞椅学生宿舍电脑椅家用网吧竞技可躺游戏椅子靠背办公座椅


				适用于办公椅 宿舍 电竞椅 网吧
				一款电脑椅电竞椅学校椅 宿舍椅 写字椅 看书椅 学校椅 午休椅

				功能:（后背可调节功能）   （可升降功能）
				   （360旋转）...

				疫情原因投资网吧项目搁置，闲置了380把全新未拆封的电竞椅，特殊渠道入手，低价转让给有需要的家人。

				给家里孩子拆了一把写作业用，坐起来很舒服

				，送头枕，一健边躺椅

				才用pu皮，内置海绵坐垫/乳胶坐垫，支持140度后仰，扶手联动调节，座椅360度旋转支持座椅升降
				椅子颜色（一共五种颜色）

				灰色  黑色  黄色  白色   粉色

				坐垫类型
				高弹海绵坐垫（默认发）
				       乳胶款（加15元）
				              脚踏板（加25元）
				有需要的点我想要咨询下单。本交易仅支持邮寄不定时更新款式。

				温馨提示；拍下默认发图七款式`);

  text.value = text.value.replaceAll(/\n+/g, "<br/>").replace(/\<br\/\>/, '')
  const commentText = ref('')
  const curUser = ref(tradeInfo.value.userName)
  const subit = () => {
    console.log(commentText.value);
    const data = ref({
      "userAvatarUrl": "https://tse2-mm.cn.bing.net/th/id/OIP-C.3P8qIgIHeaQGWolYn34_ZgAAAA?w=188&h=188&c=7&r=0&o=5&pid=1.7",
      "userName": "Router",
      "commentText": commentText.value,
      "commentTime": new Date(),
      "replies": []
    })
    if (tradeInfo.value.userName !== curUser.value) {
      const index = tradeInfo.value.comments.findIndex(v => v.userName === curUser.value)
      if (index !== -1) tradeInfo.value.comments[index].replies.unshift(data.value)
    } else tradeInfo.value.comments.unshift(data.value)
    total.value++
    commentText.value = ''
    commentPopup.value.close()
    show.value = true
  }
  const focus = ref(false)
  const show = ref(true)
  const navgateTo = () => {
    uni.navigateTo({
      url: '/pages/chat/chat'
    })
  }
</script>
<template>
  <div v-if="tradeInfo.userName" ref="trade" class="tradeInfo">
    <div class="content">
      <div class="user-container">
        <div class="user">
          <image :src="tradeInfo.userAvatarUrl" class="user-image"></image>
          <div class="name">{{ tradeInfo.userName }}</div>
        </div>
        <div
            :style="{color: tradeInfo.concern ? '#999999' : 'black'}"
            class="concern link"
            @click="tradeInfo.concern = !tradeInfo.concern"
        >
          {{ tradeInfo.concern ? '已关注' : '+ 关注' }}
        </div>
      </div>
      <div class="price" style="">
        <span style="color: red">￥<span style="font-size: 29px;">{{ tradeInfo.trade.price }}</span></span>
        <span style="color: #999; font-size: 14px;"><span
            style="margin-right: 5px;">242人想要</span><span>3.8万浏览</span></span>
      </div>
      <rich-text :nodes="tradeInfo.trade.introduce"></rich-text>
      <div class="images" style="margin-top: 10px; border-radius: 10px; overflow: hidden;">
        <image v-for="(url,i) in tradeInfo.trade.urls" :key="i" :src='url' class="image"
               style="width: 100%; border-radius: 10px;"></image>
			</div>
		</div>
		<div class="comments">
      <div class="container content">
        <div class="total" style="font-size: 18px;font-weight: bold;">{{ total }}条留言</div>
        <div class="message link" @click="()=>{
					focus=true
					show=false
					commentPopup.open('bottom')
					curUser=tradeInfo.userName
				}">
          <image class="img"
                 src='https://tse2-mm.cn.bing.net/th/id/OIP-C.3P8qIgIHeaQGWolYn34_ZgAAAA?w=188&h=188&c=7&r=0&o=5&pid=1.7'></image>
          <div class="input">看对眼就留言, 问问更多细节~</div>
        </div>
        <div v-for="(comment, i) in tradeInfo.comments" :key="i" class="comment link" @click="()=>{
					focus=true
					show=false
					commentPopup.open('bottom')
					curUser=comment.userName
				}">
          <image :src="comment.userAvatarUrl" class="img"></image>
          <div class="comment-content">
            <div class="name" style="color: #555;font-size: 13px;">{{ comment.userName }}</div>
            <div class="text" style="font-weight: 550;font-size: 13px;">{{ comment.commentText }}</div>
            <template v-for="(replie,i) in comment.replies" v-if="comment.replies[0]" :key="i">
              <div class="replie link" @click="()=>{
								focus=true
								show=false
								commentPopup.open('bottom')
								curUser=tradeInfo.userName
							}">
                <image :src="replie.userAvatarUrl" class="img" style="width: 25px;height: 25px;"></image>
                <div class="comment-content">
                  <div class="name" style="color: #555;font-size: 13px;">{{ replie.userName }}</div>
                  <div class="text" style="font-weight: 550;font-size: 13px;">{{ replie.commentText }}</div>
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </div>
    <div class="title">-超过90天或涉嫌违规的留言将被隐藏</div>
    <div v-if="show" class="social-actions">
      <div class="social comment link">
        <img alt="" class="img" src="../../static/comment.png"/>
        <span class='title'>{{ total }}</span>
      </div>
      <div class="input link" @click="()=>{
				focus=true
				show=false
				commentPopup.open('bottom')
				curUser=tradeInfo.userName
			}">说点什么
      </div>
      <div class="button one link">买同款</div>
      <div class="button two link" @click="navgateTo">我想要</div>
    </div>
  </div>
  <uni-popup ref="commentPopup" background-color="#fff" border-radius="10px 10px 0 0" type="bottom"
             @maskClick="show=true">
    <view class="commentPopup content">
      <div class="container">
        <input
            v-model="commentText"
            :focus="focus"
            class="comment-input"
            placeholder="看对眼就留言, 问问更多细节~"
            type="text"
            @blur="focus = false"
        />
        <button class="submit" @click="subit">发送</button>
      </div>
    </view>
  </uni-popup>
</template>

<style scoped>
	.tradeInfo{
		width: 100vw;
    height: 100vh;
	}

  .tradeInfo > .content {
    padding-bottom: 25px;
  }

  .tradeInfo > .content > .user-container {
		width: 100%;
		height: 40px;
		display: flex;
		justify-content: space-between;
		align-items: center;
    background-color: white;
	}

  .tradeInfo > .content > .user-container > .user {
		width: 100px;
		height: 100%;
		display: flex;
		justify-content: space-between;
	}

  .tradeInfo > .content > .user-container > .user > .user-image {
		width: 40px;
		height: 40px;
		border-radius: 50%;
	}

  .tradeInfo > .content > .user-container > .user > .name {
		width: 60px;
		height: 100%;
		line-height: 40px;
		font-weight: bold;
		font-size: 18px;
		text-align: center;
	}

  .tradeInfo > .content > .user-container > .concern {
		width: 70px;
		height: 30px;
		line-height: 30px;
		text-align: center;
		border-radius: 20px;
    font-weight: 550;
    background-color: rgb(230, 230, 230);
	}

  .tradeInfo > .content > .price {
		width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 20px;
    margin-bottom: 10px;
	}

  .tradeInfo > .comments {
    width: 100%;
    padding-top: 10px;
    background: #eee;
    overflow: hidden;
  }

  .tradeInfo > .comments > .container {
    width: 100%;
		height: 100%;
    background: white;
	}

  .tradeInfo > .comments > .container > .comment > .comment-content,
  .tradeInfo > .comments > .container > .comment > .comment-content > .replie > .comment-content {
		width: calc(100% - 50px);
    height: 100%;
  }

  .tradeInfo > .comments > .container .link,
  .tradeInfo > .comments > .container > .comment > .comment-content > .link {
    margin-top: 30px;
  }

  .tradeInfo > .comments > .container > .message {
    width: 100%;
    height: 40px;
    display: flex;
  }

  .tradeInfo > .comments > .container > .message > .img,
  .tradeInfo > .comments > .container > .comment > .img,
  .tradeInfo > .comments > .container > .comment > .comment-content > .replie > .img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    margin-right: 10px;
  }

  .tradeInfo > .comments > .container > .message > .input {
    height: 100%;
    line-height: 40px;
    width: calc(100% - 50px);
    border-radius: 25px;
    background: #eee;
    padding-left: 20px;
    color: #888;
  }

  .tradeInfo > .comments > .container > .comment,
  .tradeInfo > .comments > .container > .comment > .comment-content > .replie {
    width: 100%;
    display: flex;
  }

  .tradeInfo > .title {
    text-align: center;
    font-size: 13px;
    color: #777;
    margin-bottom: 30px;
    margin-top: 20px;
  }

  .tradeInfo > .social-actions {
    position: sticky;
    bottom: 0;
    width: 100%;
    height: 80px;
    background: rgb(248, 248, 248);
    padding: 5px 10px 5px 10px;
    display: flex;
    align-items: center;
    z-index: 999999;
	}

  .tradeInfo > .social-actions > .social {
    width: 25px;
    height: 50px;
    margin-right: 25px;
	}

  .tradeInfo > .social-actions > .input {
    width: 100px;
    height: 30px;
    line-height: 30px;
    padding-left: 20px;
    border-radius: 25px;
    background-color: #eee;
    font-size: 14px;
    margin-right: 20px;
  }

  .tradeInfo > .social-actions > .button {
    width: 100px;
    height: 35px;
    text-align: center;
    line-height: 35px;
		font-weight: bold;
    border-radius: 20px;
    margin-right: 20px;
    background-color: #eee;
  }

  .tradeInfo > .social-actions > .two {
    margin-right: 0;
    background-color: yellow;
  }

  .tradeInfo > .social-actions > .social > .img {
    width: 25px;
    height: 25px;
  }

  .tradeInfo > .social-actions > .social > .title {
    font-size: 12px;
    color: #555;
    display: block;
    text-align: center;
  }

  .commentPopup {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding-top: 15px;
    padding-bottom: 15px;
  }

  .commentPopup > .container {
    width: 100%;
    height: 35px;
    display: flex;
  }

  .commentPopup > .container > .comment-input {
    width: calc(100% - 100px);
    height: 100%;
    border-radius: 25px;
    background: #eee;
    padding-left: 20px;
    /* outline: 1px solid red; */
  }

  .commentPopup > .container > .submit {
    line-height: 35px;
    height: 100%;
    border-radius: 20px;
    background: yellow;
	}
</style>